import { JsonPipe } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  inject,
} from '@angular/core';
import {
  FormControl,
  NonNullableFormBuilder,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { StarRatingComponent } from './star-rating.component';

@Component({
  selector: 'app-star-rating-demo',
  standalone: true,
  imports: [
    StarRatingComponent,
    ReactiveFormsModule,
    JsonPipe,
  ],
  templateUrl: './star-rating-demo.component.html',
  styleUrl: './star-rating-demo.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StarRatingDemoComponent {
  private fb = inject(NonNullableFormBuilder);

  form = this.fb.group({
    animeName: ['', Validators.required],
    rating: [0, Validators.required],
  });

  disableControl = new FormControl(false, {
    nonNullable: true,
  });

  updateFormDisabledState(target: EventTarget | null) {
    if (!(target instanceof HTMLInputElement)) return;

    if (target.checked) {
      this.form.controls.animeName.disable();
      this.form.controls.rating.disable();
    } else {
      this.form.controls.animeName.enable();
      this.form.controls.rating.enable();
    }
  }
}

export default StarRatingDemoComponent;
